<!DOCTYPE html>
<html>
<head>
    <title>我的申请</title>
    <#include "../../include/head-file.ftl">
</head>
<body>
<div id="index" class="ms-index" v-cloak>
    <#--<ms-search ref="search" @search="search" :condition-data="conditionList" :conditions="conditions"></ms-search>-->
    <div class="ms-search" style="margin-bottom: 10px;border: 0;padding-top: 20px;">
        <el-row>
            <el-form :model="form"  ref="searchForm"  label-width="100px" size="mini">
                <el-row>
                    <el-col :span="6">
                        <el-form-item  label="报告标题" prop="reportName">
                            <el-input
                                    v-model="form.reportName"
                                    :disabled="false"
                                    :style="{width:  '100%'}"
                                    :clearable="true"
                                    placeholder="请输入报告标题">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item  label="申请人" prop="applyPerson">
                            <el-input
                                    v-model="form.applyPerson"
                                    :disabled="false"
                                    :style="{width:  '100%'}"
                                    :clearable="true"
                                    placeholder="请输入申请人">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item  label="审批状态" prop="status">
                            <el-select  v-model="form.status"
                                        :style="{width: '100%'}"
                                        :filterable="false"
                                        :disabled="false"
                                        :multiple="false" :clearable="true"
                                        placeholder="请选择审批状态">
                                <el-option v-for='item in statusOptions' :key="item.value" :value="item.value"
                                           :label="item.label"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" style="text-align: center;">
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="currentPage=1;list()">搜索</el-button>
                        <#--<el-button type="primary" icon="iconfont icon-shaixuan1" size="mini" @click="currentPage=1;$refs.search.open()">筛选</el-button>-->
                        <el-button @click="rest"  icon="el-icon-refresh" size="mini">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
    </div>
    <el-main class="ms-container">
        <el-table height="calc(100vh - 70px)" v-loading="loading" ref="multipleTable" border :data="dataList" tooltip-effect="dark">
            <el-table-column label="报告标题"  align="left" prop="reportName">
            </el-table-column>
            <el-table-column label="申请人"   align="left" prop="applyPerson">
            </el-table-column>
            <el-table-column label="申请时间"  width="240" align="left" prop="createDate">
            </el-table-column>
            <el-table-column label="审批状态"  width="120"  align="left" prop="status" :formatter="statusFormat">
            </el-table-column>
            <el-table-column label="操作"  width="200" align="center">
                <template slot-scope="scope">
                    <el-link type="primary" :underline="false" @click="viewDetails(scope.row)">详情</el-link>
                    <el-link type="primary" :underline="false" @click="cecall(scope.row)" :disabled="scope.row.status===1? false: true">撤回</el-link>
                    <el-link type="primary" :underline="false" @click="apply(scope.row)" :disabled="scope.row.status===3 || scope.row.status===4? false: true">重新申请</el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                :page-sizes="[10,20,30,40,50,100]"
                layout="total, sizes, prev, pager, next, jumper"
                :current-page="currentPage"
                :page-size="pageSize"
                :total="total"
                class="ms-pagination"
                @current-change='currentChange'
                @size-change="sizeChange">
        </el-pagination>
    </el-main>
    <el-dialog title="发布申请" :visible.sync="dialogVisible">
        <el-form :model="dialogForm" ref="ruleForm" :rules="rules">
            <el-form-item label="报告名称" label-width="100px">：
                <a @click="preview(dialogForm)" style="text-decoration: underline !important;color: #759ce2;cursor: pointer;" title="点击查看预览">{{dialogForm.reportName}}</a>
            </el-form-item>
            <el-form-item label="作者" label-width="100px">：{{dialogForm.applyPerson}}</el-form-item>
            <el-form-item label="发布板块" label-width="100px" v-if="dialogType=='details'">： {{dialogForm.cmsContent}}</el-form-item>
            <el-form-item label="申请说明" label-width="100px" v-if="dialogType=='details'">：{{dialogForm.applyExplain}}</el-form-item>
            <el-form-item label="报告编号" label-width="100px" v-if="dialogType=='apply'">：{{dialogForm.reportNum}}</el-form-item>
            <el-form-item label="所属栏目" :label-width="formLabelWidth" v-if="dialogType=='apply'">
                <el-input placeholder="请输入" disabled v-model="dialogForm.cmsContent" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="申请说明" :label-width="formLabelWidth" prop="applyExplain" v-if="dialogType=='apply'">
                <el-input type="textarea" :rows="4" placeholder="请输入申请说明" v-model="dialogForm.applyExplain"></el-input>
            </el-form-item>
            <el-form-item label="是否通知" :label-width="formLabelWidth" prop="notice" v-if="dialogType=='apply'">
                <el-radio-group v-model="dialogForm.notice" @change="changeRadio">
                    <el-radio :label="1">通知</el-radio>
                    <el-radio :label="2">不通知</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="通知方式" :label-width="formLabelWidth" prop="noticeType" v-if="dialogType=='apply'&& dialogForm.notice=='1'">
                <el-checkbox-group v-model="dialogForm.noticeTypes" @change="handleCheckedChange">
                    <el-checkbox label="1">系统通知</el-checkbox>
                    <el-checkbox label="2">短信</el-checkbox>
                    <el-checkbox label="3">邮箱</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>

</html>
<script>
    var indexVue = new Vue({
        el: '#index',
        data: function() {
            var validateApplyExplain = function (rule, value, callback) {
                var reg2 = /^.{0,150}$/;
                if (value !== '' && !reg2.test(value)) {
                    callback('最多输入150个字符')
                } else {
                    callback();
                }
            };
            var validateNotice = function (rule, value, callback) {
                if (!value) {
                    callback(new Error('请选择是否通知项'));
                } else {
                    callback();
                }
            };
            var validateNoticeType = function (rule, value, callback) {
                if (!value) {
                    callback(new Error('请选择通知方式项'));
                } else {
                    callback();
                }
            };
            return {
                conditionList: [
                    {action: 'and', field: 'log_title', el: 'eq', model: 'logTitle', name: '标题', type: 'input'},
                    {action: 'and', field: 'log_ip', el: 'eq', model: 'logIp', name: 'IP', type: 'input'},
                    {action: 'and', field: 'log_method', el: 'eq', model: 'logMethod', name: '请求方法', type: 'input'},
                    {
                        action: 'and',
                        field: 'log_request_method',
                        el: 'eq',
                        model: 'logRequestMethod',
                        name: '请求方式',
                        key: 'value',
                        title: 'value',
                        type: 'select',
                        multiple: false
                    },
                    {action: 'and', field: 'log_url', el: 'eq', model: 'logUrl', name: '请求地址', type: 'input'},
                    {
                        action: 'and',
                        field: 'log_status',
                        el: 'eq',
                        model: 'logStatus',
                        name: '请求状态',
                        key: 'value',
                        title: 'label',
                        type: 'select',
                        multiple: false
                    },
                    {
                        action: 'and',
                        field: 'log_business_type',
                        el: 'eq',
                        model: 'logBusinessType',
                        name: '业务类型',
                        key: 'value',
                        title: 'label',
                        type: 'select',
                        multiple: false
                    },
                    {
                        action: 'and',
                        field: 'log_user_type',
                        el: 'eq',
                        model: 'logUserType',
                        name: '用户类型',
                        key: 'value',
                        title: 'label',
                        type: 'select',
                        multiple: false
                    },
                    {action: 'and', field: 'log_user', el: 'eq', model: 'logUser', name: '操作人员', type: 'input'},
                    {action: 'and', field: 'log_location', el: 'eq', model: 'logLocation', name: '所在地区', type: 'input'},
                    {action: 'and', field: 'log_param', el: 'eq', model: 'logParam', name: '请求参数', type: 'textarea'},
                    {action: 'and', field: 'log_result', el: 'eq', model: 'logResult', name: '返回参数', type: 'textarea'},
                    {
                        action: 'and',
                        field: 'log_error_msg',
                        el: 'eq',
                        model: 'logErrorMsg',
                        name: '错误消息',
                        type: 'textarea'
                    },
                    {action: 'and', field: 'create_date', el: 'eq', model: 'createDate', name: '创建时间', type: 'date'},
                    {action: 'and', field: 'update_date', el: 'eq', model: 'updateDate', name: '修改时间', type: 'date'}
                ],
                conditions: [],
                dataList: [], //列表
                total: 0, //总记录数量
                pageSize: 10, //页面数量
                currentPage: 1, //初始页
                manager: ms.manager,
                formLabelWidth: '100px',
                dialogType: 'details',
                dialogVisible: false,
                loadState: false,
                loading: true,//加载状态
                emptyText: '',//提示文字
                noticeType: [],
                statusOptions: [{"value": 1, "label": "待处理"}, {"value": 2, "label": "已通过"}, {
                    "value": 3,
                    "label": "未通过"
                }, {"value": 4, "label": "已撤回"}],
                //搜索表单
                form: {
                    query: 1,
                    reportName: null,
                    applyPerson: null,
                    status: null
                },
                dialogForm: {
                    notice: 2,
                    noticeType: '2',
                    noticeTypes: []
                },
                rules: {
                    applyExplain: [
                        {validator: validateApplyExplain, trigger: 'change'}
                    ],
                    // notice: [
                    //     {validator: validateNotice, trigger: 'change'}
                    // ],
                    // noticeType: [
                    //     {validator: validateNoticeType, trigger: 'change'}
                    // ]
                }
            }
        },
        methods:{
            //查询列表
            list: function() {
                var that = this;
                that.loading = true;
                that.loadState = false;
                var page={
                    pageNo: that.currentPage,
                    pageSize : that.pageSize
                };
                var form = JSON.parse(JSON.stringify(that.form));
                for (key in form){
                    if(!form[key]){
                        delete  form[key]
                    }
                }

                history.replaceState({form:form,page:page},"");
                ms.http.get(ms.manager+"/cms/examine/getList.do",Object.assign({},form, page)).then(
                    function(res) {
                        if(that.loadState){
                            that.loading = false;
                        }else {
                            that.loadState = true
                        }
                        if (!res.result||res.data.total <= 0) {
                            that.emptyText ="暂无数据";
                            that.dataList = [];
                            that.total = 0;
                        } else {
                            that.emptyText = '';
                            that.total = res.data.total;
                            that.dataList = res.data.rows;
                        }
                    });
                setTimeout(function(){
                    if(that.loadState){
                        that.loading = false;
                    }else {
                        that.loadState = true
                    }
                }, 500);
            },
            // 详情
            viewDetails:function(row){
                this.dialogForm = Object.assign({}, this.dialogForm, row);
                this.dialogType = 'details';
                this.dialogVisible = true;
            },
            // 撤回
            cecall:function(row){
                var that = this;
                that.$confirm('确认撤回该申请吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function() {
                    var examineForm = {
                        id: row.id,
                        status: 4
                    };
                    ms.http.post(ms.manager + '/cms/examine/updateExamine.do',examineForm,{
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(function (res) {
                        if (res.result) {
                            that.$message.success('撤回成功!');
                            that.list();
                        } else  {
                            that.$message.error(res.msg);
                        }
                    }).finally(function () {
                        // that.$message.error("操作失败");
                    });
                }).catch(function() {});
            },
            // 重新申请
            apply:function(row){
                // if(row.noticeType) this.$set(this.dialogForm, 'noticeTypes', row.noticeType.split(","));
                this.dialogForm = Object.assign({}, this.dialogForm, row);
                this.$set(this.dialogForm, 'noticeTypes', []);
                this.$set(this.dialogForm, 'noticeType', null);
                this.$set(this.dialogForm, 'notice', null);
                this.$set(this.dialogForm, 'applyExplain', null);
                this.dialogType = 'apply';
                this.dialogVisible = true;
            },
            handleCheckedChange:function(value){
                this.$set(this.dialogForm, 'noticeType', value.join(','));
            },
            //表格数据转换
            statusFormat:function(row, column, cellValue, index){
                var value="";
                if(cellValue){
                    var data = this.statusOptions.find(function(value){
                        return value.value==cellValue;
                    });
                    if(data&&data.label){
                        value = data.label;
                    }
                }
                return value;
            },
            //pageSize改变时会触发
            sizeChange:function(pagesize) {
                this.loading = true;
                this.pageSize = pagesize;
                this.list();
            },
            //currentPage改变时会触发
            currentChange:function(currentPage) {
                this.loading = true;
                this.currentPage = currentPage;
                this.list();
            },
            search:function(data){
                this.form.sqlWhere = JSON.stringify(data);
                this.list();
            },
            //重置表单
            rest:function(){
                this.currentPage = 1;
                this.$refs.searchForm.resetFields();
                this.list();
            },
            submitForm: function() {
                var that = this;
                if (this.dialogType === 'apply') {
                    that.$refs.ruleForm.validate(function (valid) {
                        if (valid) {
                            ms.http.post(ms.manager + '/cms/examine/fbsq.do',that.dialogForm,{
                                headers: {
                                    'Content-Type': 'application/json'
                                }
                            }).then(function (res) {
                                if (res.result) {
                                    that.dialogVisible = false;
                                    that.$message.success('发布成功!');
                                    that.list();
                                } else  {
                                    that.$message.error(res.msg);
                                }
                            }).finally(function () {
                                // that.$message.error("操作失败");
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                } else {
                    this.dialogVisible = false
                }
            },
            resetForm: function() {
                this.dialogVisible = false
            },
            changeRadio(){
                this.$set(this.dialogForm, 'noticeTypes', []);
                this.$set(this.dialogForm, 'noticeType', null);
            },
            //预览
            preview:function(row){
                var that = this;
                ms.http.get(ms.manager + "/report/preview/html.do", {
                    id: row.reportId
                }).then(function (res) {
                    localStorage.removeItem('htmlDetail');
                    localStorage.setItem('htmlDetail',res);
                    window.open("/cms/content/reportPreview.do?id=" + row.reportId+"&contentTitle="+row.reportName+"&contentAuthor="+row.applyPerson+"&contentDatetime="+row.createDate)
                });
            }
        },
        created:function(){
            if(history.hasOwnProperty("state")&& history.state){
                this.form = history.state.form;
                this.currentPage = history.state.page.pageNo;
                this.pageSize = history.state.page.pageSize;
            }
            this.list();
        },
    })
</script>
<style>
    #index .ms-container {
        height: calc(100vh - 141px);
    }
</style>
